<template>
  <el-container class="attendance-detail-container" v-loading="loading">
    <!-- 顶部导航和筛选区域 -->
    <el-header class="header">
      <div class="header-left">
        <div class="back-btn" @click="handleBack">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回</span>
        </div>
        <div class="info-box">
          <span class="info-text">姓名: {{ userName }}</span>
          <span class="info-text">时间: {{ selectedMonth }}</span>
        </div>
        <el-select v-model="statusFilter" placeholder="状态" style="width: 120px; margin-left: 20px"
          @change="handleStatusChange">
          <el-option label="全部" value="all" />
          <el-option label="正常" value="normal" />
          <el-option label="异常" value="abnormal" />
        </el-select>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleExport">导出</el-button>
      </div>
    </el-header>

    <!-- 表格标题 -->
    <div class="table-header">
      <div class="title-wrapper">
        <el-icon class="title-icon">
          <List />
        </el-icon>
        <span class="title-text">考勤明细表</span>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-main class="container bc-table">
      <el-table :data="tableData" style="width: 100%; height: 100%">
        <el-table-column prop="date" label="日期" align="center" />
        <el-table-column prop="shift" label="班次" align="center" />
        <el-table-column prop="signInTime" label="签到时间" align="center" />
        <el-table-column prop="signInLocation" label="签到地点" align="center" show-overflow-tooltip />
        <el-table-column prop="signOutTime" label="签退时间" align="center" />
        <el-table-column prop="signOutLocation" label="签退地点" align="center" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <span :class="getStatusClass(scope.row.status)">
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="anomalyDesc" label="异常说明" align="center" />
        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-button type="primary" link @click="handleViewTrack(scope.row)">
                查看轨迹
              </el-button>
              <el-button v-if="scope.row.status === '异常'" type="primary" link @click="handleSetNormal(scope.row)">
                设为正常
              </el-button>
              <el-button v-if="scope.row.status === '异常'" type="primary" link @click="handleViewDesc(scope.row)">
                查看说明
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 分页区域 -->
    <el-footer class="footer mt20">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50, 100]"
        :total="total" layout="total,sizes, prev, pager, next, jumper" :background="true"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />
    </el-footer>

    <!-- 查看说明弹窗 -->
    <div v-if="descDialogVisible" class="custom-dialog-mask" @click="handleCloseDesc">
      <div class="custom-dialog desc-dialog" @click.stop>
        <div class="dialog-header">
          <span class="dialog-title">查看说明</span>
          <el-icon class="close-icon" @click="handleCloseDesc">
            <Close />
          </el-icon>
        </div>

        <div class="desc-content">
          <div class="desc-item">
            <div class="desc-label">签到说明：</div>
            <div class="desc-text">{{ currentDescData.signInDesc || "无" }}</div>
          </div>

          <div class="desc-item">
            <div class="desc-label">签退说明：</div>
            <div class="desc-text">{{ currentDescData.signOutDesc || "无" }}</div>
          </div>

          <div class="desc-item" v-if="currentDescData.images && currentDescData.images.length > 0">

            <div class="image-list">
              <div v-for="(image, index) in currentDescData.images" :key="index" class="image-item"
                @click="previewImage(image)">
                <img :src="image" alt="说明图片" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div v-if="imagePreviewVisible" class="custom-dialog-mask" @click="imagePreviewVisible = false">
      <div class="custom-dialog image-preview-dialog" @click.stop>
        <div class="preview-header">
          <span>图片预览</span>
          <el-icon class="close-icon" @click="imagePreviewVisible = false">
            <Close />
          </el-icon>
        </div>
        <div class="preview-content">
          <img :src="previewImageUrl" alt="预览图片" />
        </div>
      </div>
    </div>

    <!-- 设为正常确认弹窗 -->
    <div v-if="setNormalDialogVisible" class="custom-dialog-mask" @click="handleCloseSetNormal">
      <div class="custom-dialog set-normal-dialog" @click.stop>
        <div class="confirm-header">
          <span class="confirm-title">提示</span>
          <el-icon class="close-icon" @click="handleCloseSetNormal">
            <Close />
          </el-icon>
        </div>

        <div class="confirm-content">
          <div class="warning-icon-wrapper">
            <img class="icon-img" src="../../assets/images/gth.png" />
          </div>
          <div class="confirm-message">
            请确认是否将本条考勤记录设为正常,此操作无法撤回
          </div>
        </div>

        <div class="confirm-footer">
          <el-button class="cancel-btn" @click="handleCloseSetNormal">取消</el-button>
          <el-button class="confirm-btn" type="primary" @click="handleConfirmSetNormal">确定</el-button>
        </div>
      </div>
    </div>

    <!-- 查看轨迹弹窗 -->
    <div v-if="trackDialogVisible" class="custom-dialog-mask" @click="handleCloseTrack">
      <div class="custom-dialog track-dialog" @click.stop>
        <div class="dialog-header">
          <span class="dialog-title">查看轨迹</span>
          <el-icon class="close-icon" @click="handleCloseTrack">
            <Close />
          </el-icon>
        </div>

        <div class="track-content">
          <div class="track-info">
            <div class="info-item">
              <span class="info-label">签到时间：</span>
              <span class="info-value">{{ currentTrackData.signInTime || "无" }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">签退时间：</span>
              <span class="info-value">{{ currentTrackData.signOutTime || "无" }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">签到地点：</span>
              <span class="info-value">{{ currentTrackData.signInLocation || "无" }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">签退地点：</span>
              <span class="info-value">{{ currentTrackData.signOutLocation || "无" }}</span>
            </div>
          </div>
          <div class="track-map">
            <OpenlayerMap :showPanel="false" :area="attendanceArea" :line="attendanceLine"></OpenlayerMap>
          </div>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { List, ArrowLeft, Close } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import OpenlayerMap from "@/components/openlayer/openlayer.vue";

const router = useRouter();
const route = useRoute();

// 加载状态
const loading = ref(false);

// 从路由参数获取数据
const userName = ref(route.query.name || "张三");
const selectedMonth = ref(route.query.month || (() => {
  const now = new Date();
  return `${now.getFullYear()}年${now.getMonth() + 1}月`;
})());
const statusFilter = ref("all");

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(400);

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(total.value / pageSize.value);
});

// 表格数据
const tableData = ref([]);

// 所有数据
const allData = ref([]);

// 查看说明弹窗
const descDialogVisible = ref(false);
const currentDescData = ref({
  signInDesc: "",
  signOutDesc: "",
  images: [],
});

// 图片预览
const imagePreviewVisible = ref(false);
const previewImageUrl = ref("");

// 设为正常确认弹窗
const setNormalDialogVisible = ref(false);
const currentSetNormalRow = ref(null);

// 查看轨迹弹窗
const trackDialogVisible = ref(false);
const currentTrackData = ref({
  signInTime: "",
  signOutTime: "",
  signInLocation: "",
  signOutLocation: "",
});

// 考勤区域和轨迹线数据
const attendanceArea = ref([]);
const attendanceLine = ref([]);

// 生成模拟数据
const generateMockData = () => {
  const shifts = ["上午", "下午"];
  const statuses = ["正常", "异常"];
  const anomalyDescs = ["—", "不足2小时", "缺卡", "未在考勤区域"];
  const locations = ["河道XXXXXXXXXXXXX", "办公室XXXXXXXXX", "现场XXXXXXXXXXX"];

  const data = [];
  const year = 2025;
  const month = 4;
  const daysInMonth = 30;

  for (let day = 1; day <= daysInMonth; day++) {
    for (let shiftIndex = 0; shiftIndex < shifts.length; shiftIndex++) {
      const shift = shifts[shiftIndex];
      const isAbnormal = Math.random() < 0.2; // 20% 概率异常
      const status = isAbnormal ? "异常" : "正常";
      const anomalyDesc = isAbnormal
        ? anomalyDescs[Math.floor(Math.random() * (anomalyDescs.length - 1)) + 1]
        : "—";

      // 签到时间
      const signInHour = shift === "上午" ? 9 : 13;
      const signInMinute = Math.floor(Math.random() * 30); // 0-29分钟
      const signInTime = `${String(signInHour).padStart(2, "0")}:${String(signInMinute).padStart(2, "0")}`;

      // 签退时间
      const signOutHour = shift === "上午" ? 11 : 16;
      const signOutMinute = Math.floor(Math.random() * 30) + 30; // 30-59分钟
      const signOutTime = `${String(signOutHour).padStart(2, "0")}:${String(signOutMinute).padStart(2, "0")}`;

      // 为异常记录生成说明和图片
      let signInDesc = "";
      let signOutDesc = "";
      let images = [];

      if (isAbnormal) {
        // 签到说明
        if (Math.random() < 0.5) {
          signInDesc = "无";
        } else {
          signInDesc = "因交通堵塞导致迟到";
        }

        // 签退说明
        if (Math.random() < 0.3) {
          signOutDesc = "无";
        } else {
          signOutDesc = "来不及了来不及了来不及了来不及了来不及了来不及了来不及了来不及了";
        }

        // 图片（模拟图片URL，实际应该是真实图片路径）
        if (Math.random() < 0.7) {
          const imageCount = Math.floor(Math.random() * 3) + 1; // 1-3张图片
          images = Array.from({ length: imageCount }, (_, i) =>
            `https://via.placeholder.com/200x150?text=Image${i + 1}`
          );
        }
      }

      data.push({
        id: (day - 1) * 2 + shiftIndex + 1,
        date: `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`,
        shift,
        signInTime,
        signInLocation: locations[Math.floor(Math.random() * locations.length)],
        signOutTime,
        signOutLocation: locations[Math.floor(Math.random() * locations.length)],
        status,
        anomalyDesc,
        signInDesc,
        signOutDesc,
        images,
      });
    }
  }

  return data;
};

// 初始化数据
onMounted(() => {

  allData.value = generateMockData();
  loadTableData();
});

// 加载表格数据
const loadTableData = () => {
  loading.value = true;
  setTimeout(() => {
    let filteredData = allData.value;

    // 根据状态筛选
    if (statusFilter.value !== "all") {
      filteredData = filteredData.filter(
        (item) => item.status === (statusFilter.value === "normal" ? "正常" : "异常")
      );
    }

    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    tableData.value = filteredData.slice(start, end);
    total.value = filteredData.length;
    loading.value = false;
  }, 300);
};

// 状态筛选变化
const handleStatusChange = (value) => {
  currentPage.value = 1;
  loadTableData();
};

// 分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  loadTableData();
};

// 当前页变化
const handleCurrentChange = (page) => {
  currentPage.value = page;
  loadTableData();
};

// 获取状态样式类
const getStatusClass = (status) => {
  if (status === "正常") {
    return "status-normal";
  } else {
    return "status-abnormal";
  }
};

// 返回
const handleBack = () => {
  router.back();
};

// 查看轨迹
const handleViewTrack = (row) => {
  // 设置当前轨迹数据
  currentTrackData.value = {
    signInTime: `${row.date} ${row.signInTime}`,
    signOutTime: `${row.date} ${row.signOutTime}`,
    signInLocation: row.signInLocation,
    signOutLocation: row.signOutLocation,
  };

  // 生成轨迹线数据（根据签到和签退地点生成模拟坐标）
  // 这里使用模拟坐标，实际应该根据地点名称或ID从接口获取真实坐标
  const signInCoords = getLocationCoordinates(row.signInLocation);
  const signOutCoords = getLocationCoordinates(row.signOutLocation);

  // 生成轨迹线（从签到地点到签退地点）
  attendanceLine.value = [
    {
      id: 1,
      line: [
        signInCoords,
        // 添加中间点使轨迹更自然
        [
          (signInCoords[0] + signOutCoords[0]) / 2 + (Math.random() - 0.5) * 0.01,
          (signInCoords[1] + signOutCoords[1]) / 2 + (Math.random() - 0.5) * 0.01,
        ],
        signOutCoords,
      ],
    },
  ];

  // 考勤区域（如果有的话，这里使用空数组，实际应该从接口获取）
  attendanceArea.value = [];

  // 显示弹窗
  trackDialogVisible.value = true;
};

// 根据地点名称获取坐标（模拟数据，实际应该从接口获取）
const getLocationCoordinates = (location) => {
  // 使用地点名称的哈希值生成稳定的坐标
  // 这里使用模拟坐标，实际应该从接口获取真实坐标
  const baseLng = 117.74256851451989;
  const baseLat = 39.00380206757584;

  // 根据地点名称生成一个相对稳定的偏移
  let hash = 0;
  if (location) {
    for (let i = 0; i < location.length; i++) {
      hash = location.charCodeAt(i) + ((hash << 5) - hash);
    }
  }

  const lngOffset = (hash % 100) / 1000; // 经度偏移
  const latOffset = ((hash * 7) % 100) / 1000; // 纬度偏移

  return [baseLng + lngOffset, baseLat + latOffset];
};

// 关闭轨迹弹窗
const handleCloseTrack = () => {
  trackDialogVisible.value = false;
  currentTrackData.value = {
    signInTime: "",
    signOutTime: "",
    signInLocation: "",
    signOutLocation: "",
  };
  attendanceLine.value = [];
  attendanceArea.value = [];
};

// 设为正常
const handleSetNormal = (row) => {
  currentSetNormalRow.value = row;
  setNormalDialogVisible.value = true;
};

// 关闭设为正常弹窗
const handleCloseSetNormal = () => {
  setNormalDialogVisible.value = false;
  currentSetNormalRow.value = null;
};

// 确认设为正常
const handleConfirmSetNormal = async () => {
  try {
    if (!currentSetNormalRow.value) return;

    // TODO: 调用接口
    // const { data } = await setAttendanceNormal({
    //   id: currentSetNormalRow.value.id,
    //   date: currentSetNormalRow.value.date,
    //   shift: currentSetNormalRow.value.shift,
    // });

    ElMessage.success("操作成功");
    setNormalDialogVisible.value = false;
    currentSetNormalRow.value = null;

    // 刷新数据
    loadTableData();
  } catch (error) {
    console.error("设为正常失败：", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 查看说明
const handleViewDesc = (row) => {
  currentDescData.value = {
    signInDesc: row.signInDesc || "无",
    signOutDesc: row.signOutDesc || "无",
    images: row.images || [],
  };
  descDialogVisible.value = true;
};

// 关闭说明弹窗
const handleCloseDesc = () => {
  descDialogVisible.value = false;
};

// 预览图片
const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl;
  imagePreviewVisible.value = true;
};

// 导出功能
const handleExport = () => {
  try {
    let exportData = allData.value;

    // 根据状态筛选
    if (statusFilter.value !== "all") {
      exportData = exportData.filter(
        (item) => item.status === (statusFilter.value === "normal" ? "正常" : "异常")
      );
    }

    // 准备导出数据
    const exportDataFormatted = exportData.map((item) => ({
      日期: item.date,
      班次: item.shift,
      签到时间: item.signInTime,
      签到地点: item.signInLocation,
      签退时间: item.signOutTime,
      签退地点: item.signOutLocation,
      状态: item.status,
      异常说明: item.anomalyDesc,
    }));

    // 转换为CSV格式
    const headers = Object.keys(exportDataFormatted[0]);
    const csvContent = [
      headers.join(","),
      ...exportDataFormatted.map((row) =>
        headers.map((header) => `"${row[header]}"`).join(",")
      ),
    ].join("\n");

    // 添加BOM以支持中文
    const BOM = "\uFEFF";
    const blob = new Blob([BOM + csvContent], {
      type: "text/csv;charset=utf-8;",
    });

    // 创建下载链接
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute("download", `考勤明细表_${userName.value}_${selectedMonth.value}.csv`);
    link.style.visibility = "hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);

    ElMessage.success("导出成功");
  } catch (error) {
    console.error("导出失败：", error);
    ElMessage.error("导出失败，请重试");
  }
};
</script>

<style lang="scss" scoped>
.attendance-detail-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .header {
    height: 90px !important;
    min-height: 90px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    padding: 0 26px 0 47px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 15px;

      .back-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #2263BF;

        .el-icon {
          font-weight: 600;
          
        
        }
      }

      .info-box {
        display: flex;
        align-items: center;
        padding: 0px 15px;
      }

      .info-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 1;

        &:first-child::after {
          content: "|";
          margin: 0 10px;
          color: #333333;
          display: inline-flex;
          align-items: center;
        }
      }
    }

    .header-right {
      .el-button {
        background: #2263bf;
        border-color: #2263bf;
      }
    }
  }

  .el-container {
    height: 100% !important;
    padding: 0 !important;
  }



  .el-main {
    padding: 0 !important;
  }

  .table-header {
    margin: 20px 0;

    .title-wrapper {
      display: flex;
      align-items: center;

      .title-icon {
        font-size: 18px;
        color: #2263bf;
        margin-right: 8px;
      }

      .title-text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
    }
  }

  .status-normal {
    color: #67c23a;
    font-weight: 500;
  }

  .status-abnormal {
    color: #f56c6c;
    font-weight: 500;
  }

  .action-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
}

// 遮罩层和弹窗基础样式
.custom-dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.custom-dialog {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

// 查看说明弹窗样式
.desc-dialog {
  width: 600px;

  .desc-content {
    padding: 20px;
    overflow-y: auto;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px;
  background: #2263bf;
  border-radius: 6px 6px 0 0;

  .dialog-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }

  .close-icon {
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }
  }
}

.desc-content {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .desc-item {
    display: flex;
    align-items: center;
    gap: 10px;

    .desc-label {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
    }

    .desc-text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      word-break: break-word;

    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;

      .image-item {
        width: 150px;
        height: 120px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.3s;
        border: 1px solid #e4e7ed;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

// 图片预览弹窗样式
.image-preview-dialog {
  width: 800px;

  .preview-content {
    padding: 20px;
    text-align: center;
    overflow-y: auto;
  }
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: #2263bf;
  border-radius: 6px 6px 0 0;

  span {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }

  .close-icon {
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }
  }
}

.preview-content {
  img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 4px;
  }
}

// 设为正常确认弹窗样式
.set-normal-dialog {
  width: 480px;

  .confirm-content {
    padding: 30px 20px;
    flex: 1;
    overflow-y: auto;
  }

  .confirm-footer {
    position: relative;
  }
}

.confirm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 20px;
  background: #2263bf;
  border-radius: 6px 6px 0 0;

  .confirm-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
  }

  .close-icon {
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }
  }
}

.confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .warning-icon-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;

    .icon-img {
      width: 90px;
      height: 90px;

      object-fit: contain;
    }
  }

  .confirm-message {
    flex: 1;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }
}

.confirm-footer {
  height: 70px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #F3F6FD;

  .cancel-btn {
    width: 100px;
    height: 36px;
    background: rgba(142, 191, 255, 0.72);
    border-radius: 3px;
    border: 1px solid #2C84FF;
    border: none;
    color: #293555;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;

    &:hover {
      background: rgba(34, 99, 191, 0.15);
    }
  }

  .confirm-btn {
    width: 100px;
    height: 36px;
    background: #2263BF;
    border-radius: 3px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;

    &:hover {
      background: #1e5aa8;
      border-color: #1e5aa8;
    }
  }
}

// 查看轨迹弹窗样式
.track-dialog {
  width: 900px;
  height: 700px;
  display: flex;
  flex-direction: column;

  .track-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .track-info {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;

      .info-item {
        display: flex;
        align-items: center;
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;

        .info-label {

          margin-right: 8px;
          white-space: nowrap;
        }

        .info-value {

          word-break: break-word;
        }
      }
    }

    .track-map {
      flex: 1;
      min-height: 0;
      padding: 20px;
    }
  }
}
</style>
